<template>
  <view class="container">
    <form @submit="formSubmit" @reset="formReset">
      <view class="item uni-column">
        <view class="title">switch</view>
        <view>
          <switch name="switch" />
        </view>
      </view>
      <view class="item uni-column">
        <view class="title">radio</view>
        <radio-group name="radio">
          <label>
            <radio value="radio1" /><text>选项一</text>
          </label>
          <label>
            <radio value="radio2" /><text>选项二</text>
          </label>
        </radio-group>
      </view>
      <view class="item uni-column">
        <view class="title">checkbox</view>
        <checkbox-group name="checkbox">
          <label>
            <checkbox value="checkbox1" /><text>选项一</text>
          </label>
          <label>
            <checkbox value="checkbox2" /><text>选项二</text>
          </label>
        </checkbox-group>
      </view>
      <view class="item uni-column">
        <view class="title">slider</view>
        <slider value="50" name="slider" show-value></slider>
      </view>
      <view class="item uni-column">
        <view class="title">input</view>
        <input class="uni-input" name="input" placeholder="这是一个输入框" />
      </view>
      <view>
        <button form-type="submit">Submit</button>
        <button type="default" form-type="reset">Reset</button>
      </view>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    formSubmit: function(e) {
      console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
      var formdata = e.detail.value;
      uni.showModal({
        content: '表单数据内容：' + JSON.stringify(formdata),
        showCancel: false
      });
    },
    formReset: function(e) {
      console.log('清空数据');
    }
  }
};
</script>

<style>
switch {
  transform: scale(0.7);
}
radio {
  transform: scale(0.7);
}
checkbox {
  transform: scale(0.7);
}
button {
}
.container {
  padding: 40rpx;
}
.item .title {
  padding: 20rpx 0;
}
</style>